<template>
	<div class="robot navBar">
		<van-nav-bar  title="矿机中心" />
		<div class="robot_banner">
			<img  src="../../assets/robot/banner.png" alt="">
		</div>
		<div class="robot_bottom">
			<div class="rb_top">
				<div @click="$router.push('/robotShopping')">
					<img src="../../assets/robot/kjsc.png" alt="">
					<span>矿机商城</span>
				</div>
				<div @click="$router.push('/transaction')">
					<img src="../../assets/robot/jymx.png" alt="">
					<span>BTB交易中心</span>
				</div>
			</div>
			
			<div class="rb_content">
				<div>
					<p>总算力：{{robot_info.mysl + robot_info.tdsl}}G</p>
					<p>总矿机：{{robot_info.cykj + robot_info.jlkj}}</p>
				</div>
				<div class="rbc_bottom">
					<div>
						<img src="../../assets/robot/grsl.png" alt="">
						<p>个人算力：{{robot_info.mysl}}G</p>
					</div>
					<div>
						<img src="../../assets/robot/tdsl.png" alt="">
						<p>团队算力：{{robot_info.tdsl}}G</p>
					</div>
				</div>
			</div>
			
			<div class="rb_bottom">
				<div class="rbb_title">
					<div class="solid"></div>
					<span>我的矿机</span>
				</div>
				
				<div class="rbb_menu">
					<div @click="$router.push('/myKuangji')">
						<div>
							<img src="../../assets/robot/cykj.png" alt="">
							<span>矿机数量</span>
						</div>
						<div>
							{{robot_info.cykj}}
						</div>
					</div>
					<div>
						<div>
							<img src="../../assets/robot/jlkj.png" alt="">
							<span>奖励矿机</span>
						</div>
						<div>
							{{robot_info.jlkj}}
						</div>
					</div>
					<div>
						<div>
							<img src="../../assets/robot/BTSsc.png" alt="">
							<span>BTS生产</span>
						</div>
						<div>
							{{robot_info.scbts}}
						</div>
					</div>
					<div>
						<div>
							<img src="../../assets/robot/ljsc.png" alt="">
							<span>累计奖励</span>
						</div>
						<div>
							{{robot_info.ljjl}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"robot",
		async created() {
			
			if(this.$store.state.robot_info == null){
				
				try{
					
					const data = await this.$apis.Common.centerinfo()
					
					this.robot_info = data.data
					
					this.$store.state.robot_info = this.robot_info
					
				}catch(e){
					//TODO handle the exception
				}
				
			}else{
				
				this.robot_info = this.$store.state.robot_info 
				
			}
			
			
		},
		data(){
			
			return{
				
				robot_info:""
				
			}
			
		}
	}
</script>

<style lang="less" scoped>
	@import '../../style/navBar.less';
	
	.robot{
		background-color: #112037;
		position: absolute;
		height: 100%;
		width: 100%;
		overflow-y: scroll;
	}
		
	.robot_banner{
		width: 100%;
		height: 3rem;
		
		img{
			width: 100%;
			height: 100%;
		}
	}
	
	.robot_bottom{
		padding:0.3rem .4rem;
		box-sizing: border-box;
		
		.rb_top{
			font-size: .28rem;
			color: #94E9FF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			div{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 3.2rem;
				height: 1.1rem;
				border-radius: .2rem;
				box-shadow:inset 0px 0px .2rem 0px rgba(28,176,212,1);
			
				img{
					width: .6rem;
					height: .6rem;
					margin-right: .19rem;
				}
			}
		}
		
		.rb_content{
			margin-top: .45rem;
			padding-top: .48rem;
			box-sizing: border-box;
			width: 100%;
			height: 2.48rem;
			background-size: 100% 100%;
			background-image: url(../../assets/robot/rob_bg.png);
			
			>div:nth-child(1),.rbc_bottom,.rbc_bottom div{
				display: flex;
				align-items: center;
				justify-content: space-around;
				font-size: .3rem;
				color: #94E9FF;
			}

			
			.rbc_bottom{
				margin-top: .3rem;
				
				div{
					justify-content: center;
					font-size: .26rem;
					width:2.9rem;
					height:.45rem;
					background:rgba(15,33,56,1);
					box-shadow:inset 0px 0px .2rem 0px rgba(28,176,212,1);
					border-radius:.1rem;
				}
				
				img{
					width: .34rem;
					height: .31rem;
					margin-right: .08rem;
				}
			}
		}
		
		.rb_bottom{
			margin-top: 0.3rem;
			
			.rbb_title{
				display: flex;
				align-items: center;
				font-size: .3rem;
				color: #94E9FF;
				
				.solid{
					width: 0.03rem;
					height: .28rem;
					margin-right: .2rem;
					background: #94E9FF;
					border-radius: 0.03rem;
				}
			}
			
			.rbb_menu{
				margin-top: .29rem;
				display: grid;
				grid-template-columns: 3.2rem 3.2rem;
				grid-template-rows: .7rem .7rem;
				grid-row-gap: .2rem;
				grid-column-gap: .2rem;
				color: #94E9FF;
				font-size: .28rem;
				
				>div{
					border: 1px solid #3A627E;
					border-radius: .2rem;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-left: .3rem;
					padding-right: .48rem;
					
					>div{
						display: flex;
						align-items: center;
						
						img{
							margin-right: .18rem;
						}
					}
				}
			}
		}
	}
	
</style>
